<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="collapse">
            <el-collapse v-model="activeName"  >
                <el-collapse-item :title='myTitle' name="1" class="my">
                    <el-form v-model="myTopic" :inline="true">
                        <!-- <el-form-item v-for="(item,key) in myTopic" :label="key" class="item">
                                            {{item}}
                                        </el-form-item> -->
                        <el-form-item label="指导老师" class="item">
                            {{ myTopic.teaName }}
                        </el-form-item>
                        <el-form-item label="状态" class="item">
                            <el-tag v-if="myTopic.status === 0" size="small" type="info">审核中</el-tag>
                            <el-tag v-else-if="myTopic.status === 1" size="small" type="danger">驳回</el-tag>
                            <el-tag v-else-if="myTopic.status === 2" size="small" type="success">通过</el-tag>
                        </el-form-item>
                        <el-form-item label="指导建议" class="item">
                            {{ myTopic.advise }}
                        </el-form-item>
                        <el-form-item label="课题来源" class="item">
                            <el-tag v-if="myTopic.cgySource === 0" size="small" type="info"></el-tag>
                            <el-tag v-else-if="myTopic.cgySource === 1" size="small" type="">自主申报</el-tag>
                            <el-tag v-else-if="myTopic.cgySource === 2" size="small" type="success">老师出题</el-tag>
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
            </el-collapse>
        </div>
        
        
        <el-form>
            <el-form-item>
                <el-badge :value="myTopic.cgySource==1? '已申报': ''" class="badgeItem">
                    <el-button @click="Stopic" type="primary">
                        自主申报课题
                    </el-button>
                </el-badge>
                <el-badge value="" class="badgeItem">
                    <el-button @click="deleteMyTopic" type="danger">
                        删除已选课题
                    </el-button>
                </el-badge>
                
            </el-form-item>
        </el-form>
        <el-form 
            :inline="true" 
            v-model="SearchForm" 
             @keydown.enter.native.prevent="getDataList()">
            
            <el-form-item>
                <el-input v-model="SearchForm.cgyName" placeholder="课题名称" type="text" maxlength="10" show-word-limit/>
            </el-form-item>
            <el-form-item>
                <el-input v-model="SearchForm.tusername" placeholder="教师账号" type="text" maxlength="10" show-word-limit  />
            </el-form-item>
            <el-form-item>
                <!-- <el-select filterable v-model="SearchForm.cgyepart" placeholder="所属院系">
                    <el-option label="计算机科学" value="计算机科学"></el-option>
                    <el-option label="网络工程" value="网络工程"></el-option>
                    <el-option label="软件工程" value="软件工程"></el-option>
                    <el-option label="教育技术" value="教育技术"></el-option>
                </el-select> -->
                <el-select filterable v-model="SearchForm.department" placeholder="所属院系">
                    <el-option v-for="item in getDictList('department')" :label="item.dictLabel" :key="item.id"
                        :value="item.dictLabel"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select :default-first-option="true" v-model="SearchForm.cgySource" placeholder="课题来源">
                    <el-option label="教师" :value='2' key="教师"></el-option>
                    <el-option label="学生" :value='1' key="学生"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button   @click="getDataList()">查询</el-button>
                <!-- <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
                <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
            </el-form-item>
        </el-form>
        
        <!-- "showDataList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" -->
        <el-table 
            :data="dataList" border
            tooltip-effect="dark" 
            style="width: 100%" 
            @selection-change="selectionChangeHandle"
            @sort-change="sortChange">
            <!-- <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column> -->
            <el-table-column type="index" label="编号" width="50" header-align="center" align="center" ></el-table-column>
            <el-table-column prop="cgyName" show-overflow-tooltip header-align="center" align="center" label="课题名称"></el-table-column>
            <el-table-column prop="cgyDepart" show-overflow-tooltip label="所属院系"  header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="cgyType" show-overflow-tooltip label="类型" sortable  header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="tusername" show-overflow-tooltip label="教师账号"  header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="teaName" show-overflow-tooltip label="教师姓名"  header-align="center" align="center">
            </el-table-column>
            <!-- <el-table-column prop="describes" show-overflow-tooltip label="描述" sortable>
            </el-table-column> -->
            <!-- <el-table-column prop="cgyStatus" show-overflow-tooltip label="老师审核状态" sortable>
            </el-table-column> -->
            <!-- <el-table-column prop="cgyLeadstatus" show-overflow-tooltip label="院系审核状态" sortable></el-table-column> -->
            <!-- <el-table-column prop="cgyAdvise" show-overflow-tooltip label="指导意见" sortable>
            </el-table-column> -->
            <!-- <el-table-column prop="gmtCreate" show-overflow-tooltip label="提交时间" sortable></el-table-column>
            <el-table-column prop="gmtModified" show-overflow-tooltip label="修改时间" sortable></el-table-column> -->
            <!-- <el-table-column prop="selectedTimes" show-overflow-tooltip label="被选次数" sortable>
            </el-table-column> -->
            <el-table-column fixed="right" header-align="center" align="center" width="200"  label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="" @click="getTopicInfo(scope.row.cgyId)">课题详情</el-button>
                    <el-button size="mini" type="text" icon="" @click="handlSelect(scope.row.cgyId)">选择</el-button>
                </template>
            </el-table-column>
            <!-- <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.userId, scope.row.state,scope.row)">修改
                    </el-button>
                    <el-button type="text" size="small" @click="deleteHandle(scope.row.userId)">
                        删除</el-button>
                </template>
            </el-table-column> -->
        </el-table>

        <el-pagination              
            @size-change="sizeChangeHandle"         @current-change="currentChangeHandle"
            :current-page="pageIndex" 
            :page-sizes="[10, 20, 50, 100]" 
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="totalPage">
        </el-pagination>

        
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </el-card>
</template>

<script>
import AddOrUpdate from './topic-Info.vue'
import servicesApi from '@/services/servicesApi';
import { getDictDataList } from '@/utils';
import debounce from 'lodash/debounce';
export default {
    name: 'selectTopic',
    data() {
        return {
            activeName: '', //折叠面板
            myTopic: {
                cgyName: '',
                status: 0,
                teaName: '',
                cgySource: 0,
            },
            myTitle: '我的课题：',
            SearchForm: {
                cgyName: '',
                tusername: '',
                cgyepart: '',
                cgySource: 2, // 1学生，2老师
                status: 0,
                susername: '',
            },
            pageIndex: 1,     // 当前页
            pageSize: 10,     // 每页大小，默认10
            totalPage: 0,     // 数据总数
            dataListLoading: false, //加载状态
            dataListSelections: [], // 多选 
            addOrUpdateVisible: false, // 可见性
            dataList: [
                {
                    cgyId:	1,
                    userId: 37,
                    cgyName:	'大风打更人',
                    cgyDepart:	'计算机科学学院',
                    cgyType:	'毕业论文',
                    cgySource:	1,
                    tusername:	'admin',
                    teaName:	'ldq',
                    describes:	'string',
                    cgyStatus:	1, //老师审核状态
                    cgyLeadstatus:	1, // 院系审核状态
                    cgyAdvise:	'', // 老师审核意见
                    gmtCreate:	'2022-11-07 20:49:30',
                    gmtModified: '2022-11-07 20:49:30',
                    version:	1,
                    deleted:	0,
                    // selectedTimes: 0,
                }

            ],     // 原始table数据
            showDataList: [],    // 展示的table数据
        }
    },
    created() {
        this.getDataList()   // 页面初始化，请求数据并在表格显示
    },
    activated() {
      this.getDataList()
    },
    components: {
        AddOrUpdate
    },
    methods: {
        getDictList(dictType) {
            let list = getDictDataList(dictType)
            // // console.log(list)
            return list
        },
        deleteMyTopic() {
            if (!this.myTopic.cgyName) {
                return this.$message.error('当前未选择课题')
            }
            this.$confirm(`确定对[课题=${this.myTopic.cgyName}]进行['删除']操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                servicesApi.delTopic().then(res => {
                    // console.log(res.data)
                    let code = res.data.code
                    if (code === 200) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 500,
                            onClose: () => {
                                this.getDataList() 
                            }
                        })
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            }).catch(() => { })
        },
        Stopic() {
            this.$router.push({ path: 'Student-topic-declare'})
        },
        getTopicInfo(cgyId) {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                // 当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来
                this.$refs['addOrUpdate'].init(cgyId)
            })
        },
        handlSelect(value) {
            this.dataListSelections.push(value)
            // console.log(this.dataListSelections)
            servicesApi.chooseTopic(value).then(res => {
                let code = res.data.code
                // console.log('选择课题')
                if (code === 200) {
                    this.$message({
                        message: '选题成功',
                        type: 'success',
                        duration: 1000,
                        onClose: () => {
                            this.getDataList()
                        }
                    })
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 1000,
                    })
                }
            })
        },
        // 获取数据
        getDataList: debounce(function() {
            // 请求获取数据
            // this.showDataList = this.dataList.slice(0, this.pageSize);  // 然后显示区间数据（无排序触发），且这里显示1-10条
            // this.dataListLoading = true
            // this.totalPage = this.totalPage
            // this.dataListLoading = false

            this.dataListLoading = true
            servicesApi.getSelectedTopic().then(res => {
                // console.log(res.data)
                let code = res.data.code
                let data = res.data.data
                if (code === 200 && data) {
                    this.myTopic = data 
                    this.myTitle = '我的课题：' + this.myTopic.cgyName 
                    
                    
                } else {
                    this.myTitle = '我的课题：'
                }
            })

            let pageInfo = {
                current: this.pageIndex,
                size: this.pageSize,
                // ...this.SearchForm, //解构赋值
                cgyDepart: this.SearchForm.cgyepart,
                cgyName: this.SearchForm.cgyName,
                cgySource: this.SearchForm.cgySource === null?2:this.SearchForm.cgySource,
                // current: 1,
                // size: 10,
                status: this.SearchForm.status,
                susername: this.SearchForm.susername,
                tusername: this.SearchForm.tusername
            }
     
            this.$servicesApi.getTopicList(pageInfo).then(res => {
                // console.log(res.data)
                let code = res.data.code
                let data = res.data.data
                if (code === 200) {
                    this.dataList = data.list
                    this.totalPage = data.total
                } else {
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false
            })
        }, 1000, { 'leading': true, 'trailing': false }),
        // 1.改变页面选项触发的方法（val:显示的每页大小）
        sizeChangeHandle(val) {
            this.pageIndex = 1;   // 跳转第一页
            this.pageSize = val     // 每页大小赋值给绑定的pageSize
            this.getDataList()
            // this.showDataList = this.dataList.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);   // 抓取区间数据
        },

        // 2.改变页码触发的方法(val:触发的当前页码)
        currentChangeHandle(val) {
            this.pageIndex = val;  // 跳转当前页
            this.getDataList()
            // this.showDataList = this.dataList.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);   // 抓取区间数据
        },
        // 3.排序监听
        sortChange(column) {
            this.dataList = this.dataList.sort(
                this.SortFun(column.prop, column.order === 'ascending')
            );
            this.showDataList = this.dataList.slice(0, this.pageSize);
            this.pageIndex = 1;
        },

        // 4.排序方法
        SortFun(attr, rev) {
            this.pageIndex = 1;
            //第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
            if (rev == undefined) {
                rev = 1;
            } else {
                rev = rev ? 1 : -1;
                //rev = rev>0 ? 1 : -1;
            }
            return function(a, b) {
                a = a[attr];
                b = b[attr];
                if (a != null) {
                    // 1.列数据类型为string时的排序
                    if (typeof a == 'string') {
                        // 1.1 判断是否为日期类型
                        if (a.split(' ').length === 2) {
                            if (a < b) {
                                return rev * -1;
                            }
                            if (a > b) {
                                return rev * 1;
                            }
                            return 0;
                        } else if (!isNaN(a)) {
                            // 是否能转为数字类型
                            // // console.log("字符数字类型",attr,a)
                            if (parseFloat(a) < parseFloat(b)) {
                                return rev * -1;
                            }
                            if (a > b) {
                                return rev * 1;
                            }
                            return 0;
                        }
                        else {
                            // 1.2 普通字符类型
                            //// console.log("普通字符类型",attr,a)
                            if (a < b) {
                                return rev * -1;
                            }
                            if (a > b) {
                                return rev * 1;
                            }
                            return 0;
                        }
                    }
                    // 2. 列数据类型为number时的排序
                    if (typeof a == 'number') {
                        //// console.log("Number型:", a);
                        if (a < b) {
                            return rev * -1;
                        }
                        if (a > b) {
                            return rev * 1;
                        }
                        return 0;
                    }
                }
            };
        },

        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val
            // console.log('多选')
            // console.log(this.dataListSelections)
        },
        // // 新增 / 修改
        // addOrUpdateHandle(id, state) {
        //     this.addOrUpdateVisible = true
        //     this.$nextTick(() => {
        //         // 当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来
        //         this.$refs['addOrUpdate'].init(id, state)
        //     })
        // },

        
    },
    
};
</script>

<style scoped>
.badgeItem{
    margin-top: 20px;
    margin-right: 60px;
}
.collapse>>>.el-collapse{
    border: none;
}
.my>>>.el-collapse-item__header {
    /* background-color: rgb(241, 244, 245); */
    color: blue;
    padding: 20px;
    font-size: medium;
    /* border: none; */
}
.my>>>.el-collapse-item__wrap {
    /* background-color: #f1f4f5; */
    border: none;
}
.item>>>.el-form-item__label {
    /* color:red; */
    font-size: medium;
    padding: 0px 20px;
}

.item>>>.el-form-item__content {
    padding: 0px 20px;
    /* background-color: white; */
}

.my{
    margin: 20px 0px;
    /* background-color:red; */
}
.item{
    /* background-color:  rgb(64, 147, 174); */
    width: 40%;
}
</style>
